<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>  
<c:set var="contextPath" value="<%=request.getContextPath()%>"></c:set> 
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Tables - Ace Admin</title>
		
		<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.js"></script>
		
		<script type="text/javascript">
		$(function(){
		//查询
		$('.show-test').click(function(){
			var testId = $(this).parent().siblings().eq(0).text();
 			$.ajax({//通过后传到后台
				type:'POST',
				url:'${contextPath}/teacher/getTestById',
				data:{
					id: testId
				},
				dataType:"json",
				success:function(data){
					$('#showTestModal .sub-name').text(data.subName);
					$('#showTestModal .content').text(data.content);
					$('#showTestModal .test-type').text(data.examTestType.testType);
					$('#showTestModal .test-type-score').text(data.examTestType.testTypeScore);
					$('#showTestModal .choose-a').text(data.chooseA);
					$('#showTestModal .choose-b').text(data.chooseB);
					$('#showTestModal .choose-c').text(data.chooseC);
					$('#showTestModal .choose-d').text(data.chooseD);
					$('#showTestModal .answer').text(data.answer);
				}
			});
			$('#showTestModal').modal('show');
		});
		
		//弹出添加试题模态框
		$('#addTestBtn').click(function(){
 			$.ajax({//通过后传到后台
				type:'POST',
				url:'${contextPath}/teacher/getSubjectAndTypes',
				data:{},
				dataType:"json",
				success:function(data){
					$('#addTestFrom select[name = "subId"]').empty();
					$('#addTestFrom select[name = "testType"]').empty();
					
					$.each(data.subjectList,function(index,item){
						$('#addTestFrom select[name = "subId"]').append('<option value="' + item.subId + '">'+ item.name +'</option>');
					});
					$.each(data.testTypeList,function(index,item){
						$('#addTestFrom select[name = "testType"]').append('<option value="' + item.id + '" score="' + item.testTypeScore + '">'+ item.testType +'</option>');
					});
					$('#addTestFrom select[name = "testType"]').trigger('change');
					
				}
			});
			$('#addTestModal').modal('show');
		});
		
		//添加框的类型改变时
		$('#addTestFrom select[name = "testType"').change(function(){
			$('#addTestFrom .testTypeScore').text('本题每题' + $(this).find('option:checked').attr('score')+'分.');
			var testType = $(this).val();
			
			if(testType == 1){//单选题
				$('#addTestFrom .answerTotal input:radio').show();
				$('#addTestFrom .answerTotal input:checkbox').hide();
			}else if(testType == 2){
				
				$('#addTestFrom .answerTotal input:checkbox').show();
				$('#addTestFrom .answerTotal input:radio').hide();
			}else{
				alert('无这些类型！');
			}
		});
		
		//保存并添加试题
		$('#addTestSaveBtn').click(function(){
			//if($('#addTestFrom').valid()){ //前台校验
				var subId = $('#addTestFrom select[name = "subId"]').val();
				var testType = $('#addTestFrom select[name = "testType"]').val();
				var content = $('#addTestFrom textarea[name = "content"]').val();
				var chooseA = $('#addTestFrom input[name = "chooseA"]').val();
				var chooseB = $('#addTestFrom input[name = "chooseB"]').val();
				var chooseC = $('#addTestFrom input[name = "chooseC"]').val();
				var chooseD = $('#addTestFrom input[name = "chooseD"]').val();
				var answerString = '';
				if(testType == 1){
					answerString += $('#addTestFrom input[name = "answer"]:radio:checked').val();
				}else if(testType == 2){
					var array = $('#addTestFrom input[name = "answer"]:checkbox:checked');
					$.each(array,function(index,item){
						answerString += (index == 0 ? $(item).val() : (',' + $(item).val()));
					});
				}else{
					alert('无这些试题类型');
				}
				$.ajax({//通过后传到后台
					type:'POST',
					url:'${contextPath}/teacher/saveTest',
					data:{
						subId:subId,
						'examTestType.id':testType,
						content:content,
						chooseA:chooseA,
						chooseB:chooseB,
						chooseC:chooseC,
						chooseD:chooseD,
						answer:answerString
					},
					dataType:"json",
					success:function(data){
						//判断成功与否
						if(data.success){
							alert('添加成功');
							window.location.reload();
						}else{
							//不成功则输出错误信息
							var messageMap = data.messageMap;
							for(var key in messageMap){
								var value = messageMap[key];
								 $('#addTestFrom input[name = "' + key +'"]').after('<label class="jsr303-message-lable">' + value + '</label>');
							}
							alert('添加失败！-' + messageMap['message']);
						}
					}
				});
			//}
			
		});
		
		//弹出修改模态框
		$('.edit-test').click(function(){
			var testId = $(this).parent().siblings().eq(0).text();
			
 			$.ajax({//通过后传到后台
				type:'POST',
				url:'${contextPath}/teacher/getTestById',
				data:{
					id: testId
				},
				dataType:"json",
				success:function(data){
						$.ajax({//通过后传到后台
							type:'POST',
							url:'${contextPath}/teacher/getSubjectAndTypes',
							data2:{},
							dataType:"json",
							success:function(data2){
								$('#updateTestFrom select[name = "subId"]').empty();
								$('#updateTestFrom select[name = "testType"]').empty();
								
								$.each(data2.subjectList,function(index,item){
									if(data.subId == item.subId){
										$('#updateTestFrom select[name = "subId"]').append('<option value="' + item.subId + '"selected="selected">'+ item.name +'</option>');
										
									}else{
										$('#updateTestFrom select[name = "subId"]').append('<option value="' + item.subId + '">'+ item.name +'</option>');
									}
								});
								$.each(data2.testTypeList,function(index,item){
									if(data.examTestType.id == item.id){
										$('#updateTestFrom select[name = "testType"]').append('<option value="' + item.id + '" score="' + item.testTypeScore + '"selected="selected">'+ item.testType +'</option>');
									}else{
										$('#updateTestFrom select[name = "testType"]').append('<option value="' + item.id + '" score="' + item.testTypeScore + '">'+ item.testType +'</option>');
									}
								});
						
								$('#updateTestFrom select[name = "testType"]').trigger('change');
								
							}
						});
	//				$('#updateTestFrom select[name = "subId"]').empty();
	//				$('#updateTestFrom select[name = "testType"]').empty();
	//				$('#updateTestFrom select[name = "subId"]').append('<option value="' + data.subId + '">'+ data.subName +'</option>');
	//				$('#updateTestFrom select[name = "testType"]').append('<option value="' + data.examTestType.id + '" score="' + data.examTestType.testTypeScore + '">'+ data.examTestType.testType +'</option>');
	//				$('#updateTestFrom select[name = "testType"]').trigger('change');
					
					$('#updateTestFrom textarea[name = "content"]').text(data.content);
					$('#updateTestFrom input[name = "chooseA"]').val(data.chooseA);
					$('#updateTestFrom input[name = "chooseB"]').val(data.chooseB);
					$('#updateTestFrom input[name = "chooseC"]').val(data.chooseC);
					$('#updateTestFrom input[name = "chooseD"]').val(data.chooseD);
					$('#updateTestFrom input[name = "id"]').val(data.id);
					
					if(data.examTestType.id == 1){
						$('#updateTestFrom input:radio[value = "'+ data.answer +'"]').attr('checked', true);
					}else if(data.examTestType.id == 2){
						$('#updateTestFrom input[type="checkbox"]').removeAttr('checked');
						var array = data.answer.split(',');
						$.each(array,function(index,item){
							$('#updateTestFrom input:checkbox[value = "'+ item  +'"]').attr('checked',true);
						});
					}else{
						alert("无这些类型！");
					}
				}
			});
			$('#updateTestModal').modal('show');
		});
	
		//修改模态框的类型改变时
		$('#updateTestFrom select[name = "testType"]').change(function(){
			$('#updateTestFrom .testTypeScore').text('本题每题' + $(this).find('option:checked').attr('score')+'分.');
			var testType = $(this).val();
			
			if(testType == 1){//单选题
				$('#updateTestFrom .answerTotal input:radio').show();
				$('#updateTestFrom .answerTotal input:checkbox').hide();
			}else if(testType == 2){
				
				$('#updateTestFrom .answerTotal input:checkbox').show();
				$('#updateTestFrom .answerTotal input:radio').hide();
			}else{
				alert('无这些类型！');
			}
		});
		
		//保存试题
		$('#updateTestSaveBtn').click(function(){
			//if($('#addTestFrom').valid()){ //前台校验
				var testId = $('#updateTestFrom input[name = "id"]').val();
				var subId = $('#updateTestFrom select[name = "subId"]').val();
				var testType = $('#updateTestFrom select[name = "testType"]').val();
				var content = $('#updateTestFrom textarea[name = "content"]').val();
				var chooseA = $('#updateTestFrom input[name = "chooseA"]').val();
				var chooseB = $('#updateTestFrom input[name = "chooseB"]').val();
				var chooseC = $('#updateTestFrom input[name = "chooseC"]').val();
				var chooseD = $('#updateTestFrom input[name = "chooseD"]').val();
				var answerString = '';
				if(testType == 1){
					answerString += $('#updateTestFrom input[name = "answer"]:radio:checked').val();
				}else if(testType == 2){
					var array = $('#updateTestFrom input[name = "answer"]:checkbox:checked');
					$.each(array,function(index,item){
						answerString += (index == 0 ? $(item).val() : (',' + $(item).val()));
					});
				}else{
					alert('无这些试题类型');
				}
				$.ajax({//通过后传到后台
					type:'POST',
					url:'${contextPath}/teacher/updateTest',
					data:{
						id:testId,
						subId:subId,
						'examTestType.id':testType,
						content:content,
						chooseA:chooseA,
						chooseB:chooseB,
						chooseC:chooseC,
						chooseD:chooseD,
						answer:answerString
					},
					dataType:"json",
					success:function(data){
						//判断成功与否
						if(data.success){
							alert('修改成功');
							window.location.reload();
						}else{
							//不成功则输出错误信息
							var messageMap = data.messageMap;
							for(var key in messageMap){
								var value = messageMap[key];
								 $('#addTestFrom input[name = "' + key +'"]').after('<label class="jsr303-message-lable">' + value + '</label>');
							}
							alert('修改失败！-' + messageMap['message']);
						}
					}
				});
			//}
			
		});
		
		//删除信息
		$('.delete-test').click(function(){
				if(confirm("是否确认能删除？")){
					var testId = $(this).parent().siblings().eq(0).text();
		 			$.ajax({//通过后传到后台
						type:'POST',
						url:'${contextPath}/teacher/deleteTest',
						data:{
							id: testId
						},
						dataType:"json",
						success:function(data){
							if(data.success){
								alert('删除成功');
								window.location.reload();
							}else{
								//不成功则输出错误信息
								var messageMap = data.messageMap;
								for(var key in messageMap){
									var value = messageMap[key];
									 $('#addTestFrom input[name = "' + key +'"]').after('<label class="jsr303-message-lable">' + value + '</label>');
								}
								alert('删除失败！-' + messageMap['message']);
							}
						}
					});
				}else{
					return false;
				}
			
		});
		
		});
		</script>
		
	</head>

<body class="no-skin">
	<!-- /section:settings.box -->
	<div class="page-content-area">	
		<a title="添加试题" id="addTestBtn" class="btn btn-primary"><i class="ace-icon fa fa-plus ">&nbsp;&nbsp;添加试题</i></a>
		<div class="row">
			<div class="col-xs-12">
				<!-- PAGE CONTENT BEGINS -->
				<div class="row">
					<div class="col-xs-12">
						<table id="sample-table-1" class="table table-striped table-bordered table-hover">
							<thead>
								<tr>
									<th>题号</th>
									<th>科目</th>
									<th>题干</th>
									<th>选项A</th>
									<th>选项B</th>
									<th>选项C</th>
									<th>选项D</th>
									<th>答案</th>
									<th>题目类型</th>
									<th>题目分数</th>
									<th>操作</th>
								</tr>
							</thead>
	
							<tbody>
							<c:forEach items="${page.dates }" var="test">
								<tr>
									<td>${test.id }</td>
									<td>${test.subName }</td>
									<td><div class="content">${test.content }</div></td>
									<td><div class="choose">${test.chooseA }</div></td>
									<td><div class="choose">${test.chooseB }</div></td>
									<td><div class="choose">${test.chooseC }</div></td>
									<td><div class="choose">${test.chooseD }</div></td>
									<td>${test.answer }</td>
									<td>${test.examTestType.testType }</td>
									<td>${test.examTestType.testTypeScore }</td>
									<td>
									<a title="查看试题" class="btn btn-primary btn-xs show-test"><i class="ace-icon fa fa-comment"></i></a>
									<a title="修改试题" class="btn btn-primary btn-xs edit-test"><i class="ace-icon fa fa-pencil"></i></a>
									<a title="删除试题" class="btn btn-primary btn-xs delete-test"><i class="ace-icon fa fa-trash-o"></i></a>
									</td>
								</tr>
							</c:forEach>
							</table>
							<jsp:include page="/WEB-INF/view/page/page.jsp">
								<jsp:param name="url" value="tests"/>
								<jsp:param name="items" value="${page.totalSize}"/>
							 </jsp:include> 
						</div>
					</div>
				</div>
				
				<!-- 添加试题 -->
				<div class="modal fade" id="addTestModal" tabindex="-1" role="dialog" aria-labelledby="showTestModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
									&times;
								</button>
								<h4 class="modal-title" id="showTestModalLabel">
									添加试题
								</h4>
							</div>
							<div class="modal-body">
								<form id="addTestFrom" method="post">
								<p><label>科目:</label><select name="subId"></select></p>
								<p><label>试题类型:</label><select name="testType"></select><lable class="testTypeScore"></label></p>
								<p><label>题干:</label><textarea name="content" rows="8" cols="50" placeholder="填写题目内容"></textarea></p>
								<p><label>选项A:</label><input type="text" name="chooseA" placeholder="填写候选答案内容，作为选项A。" style="width:396px"/></p>
								<p><label>选项B:</label><input type="text" name="chooseB" placeholder="填写候选答案内容，作为选项B。" style="width:396px"/></p>
								<p><label>选项C:</label><input type="text" name="chooseC" placeholder="填写候选答案内容，作为选项C。" style="width:396px"/></p>
								<p><label>选项D:</label><input type="text" name="chooseD" placeholder="填写候选答案内容，作为选项D。" style="width:396px"/></p>
								<p><label>答案:</label>
									<span class="answerTotal">
										<input type="radio" name="answer" value="A" checked />
										<input type="checkbox" name="answer" value="A" />选项A
										<input type="radio" name="answer" value="B" checked />
										<input type="checkbox" name="answer" value="B" />选项B
										<input type="radio" name="answer" value="C" checked />
										<input type="checkbox" name="answer" value="C" />选项C
										<input type="radio" name="answer" value="D" checked />
										<input type="checkbox" name="answer" value="D" />选项D
									</span>
								</p>
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭
								</button>
								<button id="addTestSaveBtn" type="button" class="btn btn-primary">
									保存
								</button>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal -->
				</div>
				
				<!-- 修改试题 -->
				<div class="modal fade" id="updateTestModal" tabindex="-1" role="dialog" aria-labelledby="showTestModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
									&times;
								</button>
								<h4 class="modal-title" id="showTestModalLabel">
									修改试题
								</h4>
							</div>
							<div class="modal-body">
								<form id="updateTestFrom" method="post">
								<p><label>科目:</label><select name="subId"></select></p>
								<p><label>试题类型:</label><select name="testType"></select>&nbsp;&nbsp;&nbsp;&nbsp;<label><span class="testTypeScore" style="font-weight:bold"></span></label></p>
								<p><label>题干:</label><textarea name="content" rows="8" cols="50" placeholder="填写题目内容" ></textarea></p>
								<p><label>选项A:</label><input type="text" name="chooseA" placeholder="填写候选答案内容，作为选项A。" style="width:396px" /></p>
								<p><label>选项B:</label><input type="text" name="chooseB" placeholder="填写候选答案内容，作为选项B。" style="width:396px" /></p>
								<p><label>选项C:</label><input type="text" name="chooseC" placeholder="填写候选答案内容，作为选项C。" style="width:396px" /></p>
								<p><label>选项D:</label><input type="text" name="chooseD" placeholder="填写候选答案内容，作为选项D。" style="width:396px" /></p>
								<p><label>答案:</label>
									<span class="answerTotal">
										<input type="radio" name="answer" value="A" checked />
										<input type="checkbox" name="answer" value="A" />选项A
										<input type="radio" name="answer" value="B" checked />
										<input type="checkbox" name="answer" value="B" />选项B
										<input type="radio" name="answer" value="C" checked />
										<input type="checkbox" name="answer" value="C" />选项C
										<input type="radio" name="answer" value="D" checked />
										<input type="checkbox" name="answer" value="D" />选项D
									</span>
								</p>
								<input type="hidden" name="id"/>
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭
								</button>
								<button id="updateTestSaveBtn" type="button" class="btn btn-primary">
									保存
								</button>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal -->
				</div>
				
				<!-- 查看详细试题 -->
				<div class="modal fade" id="showTestModal" tabindex="-1" role="dialog" aria-labelledby="showTestModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
									&times;
								</button>
								<h4 class="modal-title" id="showTestModalLabel">
									查看详细试题
								</h4>
							</div>
							<div class="modal-body">
								<label>试题科目：&nbsp;&nbsp;</label><span class="sub-name"></span><br />
								<label>题目：&nbsp;&nbsp;</label><span class="content"></span>&nbsp;&nbsp;——&nbsp;&nbsp;(<span class="test-type"></span>,每题<span class="test-type-score"></span>分.)<br />
								<label>A：&nbsp;&nbsp;</label><span class="choose-a"></span><br />
								<label>B：&nbsp;&nbsp;</label><span class="choose-b"></span><br />
								<label>C：&nbsp;&nbsp;</label><span class="choose-c"></span><br />
								<label>D：&nbsp;&nbsp;</label><span class="choose-d"></span><br />
								<label style="font-weight:bold">答案：&nbsp;&nbsp;</label><span class="answer" style="font-weight:bold"></span><br />
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭
								</button>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal -->
				</div>
				
				
				<div id="modal-table" class="modal fade" tabindex="-1">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header no-padding">
								<div class="table-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
										<span class="white">&times;</span>
									</button>
									Results for "Latest Registered Domains
								</div>
							</div>
	
							<div class="modal-body no-padding">
								<table class="table table-striped table-bordered table-hover no-margin-bottom no-border-top">
									<thead>
										<tr>
											<th>Domain</th>
											<th>Price</th>
											<th>Clicks</th>
	
											<th>
												<i class="ace-icon fa fa-clock-o bigger-110"></i>
												Update
											</th>
										</tr>
									</thead>
	
									<tbody>
										<tr>
											<td>
												<a href="#">ace.com</a>
											</td>
											<td>$45</td>
											<td>3,330</td>
											<td>Feb 12</td>
										</tr>
	
										<tr>
											<td>
												<a href="#">base.com</a>
											</td>
											<td>$35</td>
											<td>2,595</td>
											<td>Feb 18</td>
										</tr>
	
										<tr>
											<td>
												<a href="#">max.com</a>
											</td>
											<td>$60</td>
											<td>4,400</td>
											<td>Mar 11</td>
										</tr>
	
										<tr>
											<td>
												<a href="#">best.com</a>
											</td>
											<td>$75</td>
											<td>6,500</td>
											<td>Apr 03</td>
										</tr>
	
										<tr>
											<td>
												<a href="#">pro.com</a>
											</td>
											<td>$55</td>
											<td>4,250</td>
											<td>Jan 21</td>
										</tr>
									</tbody>
								</table>
							</div>
	
							<div class="modal-footer no-margin-top">
								<button class="btn btn-sm btn-danger pull-left" data-dismiss="modal">
									<i class="ace-icon fa fa-times"></i>
									Close
								</button>
	
								<ul class="pagination pull-right no-margin">
									<li class="prev disabled">
										<a href="#">
											<i class="ace-icon fa fa-angle-double-left"></i>
										</a>
									</li>
	
									<li class="active">
										<a href="#">1</a>
									</li>
	
									<li>
										<a href="#">2</a>
									</li>
	
									<li>
										<a href="#">3</a>
									</li>
	
									<li class="next">
										<a href="#">
											<i class="ace-icon fa fa-angle-double-right"></i>
										</a>
									</li>
								</ul>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal-dialog -->
				</div><!-- PAGE CONTENT ENDS -->
			</div><!-- /.col -->
		</div><!-- /.row -->
	</body>
</html>